<template>
  <div class="main-app">
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="form-inline">
        <el-form-item label="姓名:">
          <el-input v-model="formInline.name" clearable />
        </el-form-item>
        <el-form-item label="电话:">
          <el-input v-model="formInline.phone" clearable />
        </el-form-item>
        <el-form-item label="状态:">
          <el-select v-model="formInline.disable" placeholder="请选择" clearable>
            <el-option label="在职" value="0" />
            <el-option label="离职" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh-right" @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="show-result">

      <!-- 加载动态菜单 -->
      <el-form :inline="true" class="form-inline">
        <el-form-item v-for="item in toolbtn" :key="item.id">
          <el-button type="primary" :icon="item.meta.icon" @click="showViews(item.name)">
            {{ item.meta.title }}
          </el-button>
        </el-form-item>
      </el-form>


      <div class="result">
        <div class="table">

          <el-table ref="multipleTable" v-loading="loading" :data="tableData" border tooltip-effect="dark"
            style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="phone" label="电话" />

            <el-table-column label="性别" prop="sex" width="120">
              <template slot-scope="scope">
                <el-tag style="width: 100%; text-align: center;" effect="dark" :class="'bg-'+scope.row.sexColor">{{
              scope.row.sex
            }}</el-tag>
              </template>
            </el-table-column>




            <el-table-column label="状态" prop="status" width="120">
              <template slot-scope="scope">
                <el-tag style="width: 100%; text-align: center;" effect="dark" :class="'bg-'+scope.row.statusColor">{{
              scope.row.statusName
            }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
              <template slot-scope="scope">
                {{ scope.row.createTime | parseDate }}
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="page">
          <el-pagination background :current-page.sync="currentPage" layout="total,prev, pager, next, sizes"
            :total="total" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" @current-change="handleCurrentChange"
            @size-change="handleSizeChange" />
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  // Table组件相关逻辑，需要引用
  import {
    pageMixin
  } from "../../../mixins/index";
  import {
    UserStatus
  } from "../../../utils/resource.js";
  import {
    getUsers,
   ApprovalUserAsync
  } from '../../../api/user.js';
  export default {
    filters: {
      parseDate(value) {
        if (value) {
          return value.replace("T", " ");
        }
      },

    },
    mixins: [pageMixin],
    data() {
      return {
        formInline: {},
        toolbtn: [], // 列表顶部按钮
        dialogVisible: false, // 是否隐藏提示框
        imgSrc: "", // 公众号二维码图片路径
        timer: null // 计时器
      };
    },
    computed: {

    },
    async created() {
      await this.init();
    },
    methods: {
      // 列表顶部功能按钮点击事件
      showViews(action) {
        // console.log(action);
        switch (action) {

          case '审批通过':
            this.examine('10');
            break;
          case '拒绝审批':
            this.examine('20');
            break;

        }
      },
      async init() {
        // 初始化按钮数据
        this.toolbtn = JSON.parse(localStorage.getItem('用户审核'));
        console.log( this.toolbtn);
        this.tableData = [];
        this.loading = true;
        const {
          data,
          count
        } = await getUsers({
          limit: this.pageSize,
          page: this.currentPage,
          searchParam: JSON.stringify({
            Name: this.formInline.name,
            Phone: this.formInline.phone,
            Disabled: this.formInline.disable,
            Status: '0,20'
          })
        });
        this.tableData = data;

        this.tableData.forEach(item => {
          if (item.sex === '1') {
            item.sex = "女";
            item.sexColor = "red";
          } else {
            item.sex = "男";
            item.sexColor = 'blue';
          }

          if (item.weChatOpenId === '0') {
            item.weChat = "未绑定";
            item.weChatColor = "red";
          } else {
            item.weChat = "已绑定";
            item.weChatColor = 'blue';
          }

          let index=UserStatus.findIndex(T=>{
            return item.status.toString()===T.value
          })
          if(index>=0){
            item.statusName=UserStatus[index].label;
             item.statusColor =UserStatus[index].color;
          }else{
            item.statusName = "未知信息";
            item.disabledColor = "red";
          }


        })
        this.total = count;
        this.loading = false;



      },


      async examine(value) {
        const arr = this.$refs.multipleTable.selection;
        // if (arr.length !== 1) {
        //   this.$message.error('此功能仅限操作1条数据！');
        //   return;
        // }

        let confimText = "";
        if (value === "10") {
          confimText = "审核通过";
        } else {
          confimText = "拒绝审核";
        }
        this.$confirm(`此操作将${confimText}所选用户, 是否继续?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          let ids2 = '';
          for (let i = 0; i < arr.length; i++) {
            if (i === 0) {
              ids2 += arr[i].guid
            } else {
              ids2 += ("," + arr[i].guid)
            }
          }
          var formdata = {
            Guid: ids2,
            Status: parseInt(value)
          };

          // 操作数据
          await ApprovalUserAsync(formdata);
          await this.init();
          this.$message({
            type: "success",
            message: `${confimText}操作成功!`,
          });
        });
      },

      async reset() {
        this.formInline = {
          name: "",
          phone: "",
          disable: "",
        };
        await this.init();
      },


      // 关闭dialog时候触发
      closeDialog() {
        // 设置二维码图片为空
        this.imgSrc = "";
        // 隐藏提示框
        this.dialogVisible = false;
        // 停止定时检测绑定状态流程
        clearTimeout(this.timer);
      },

    },
  };
</script>

<style lang="scss" scoped>
  .result {
    margin-top: 10px;
  }

  .show-result {
    margin-top: 10px;
  }

  .dialog_diy {
    ::v-deep .el-dialog__wrapper {

      // eslint-disable-line
      .el-dialog {

        .el-dialog__body {
          padding: 0px;
        }

        .el-dialog__header {
          padding: 0px;
        }

        .el-dialog__headerbtn {
          top: 5px;
          right: 5px;
          padding-top: 10px;
        }

        .el-dialog__headerbtn .el-dialog__close {
          color: #fff;
          height: 30px;
          width: 35px;
        }

        .el-dialog__headerbtn .el-dialog__close:hover {
          color: gray;
        }
      }
    }
  }
</style>
